/*
 * @Author: huangyingli
 * @Date: 2023-02-22 19:52:50
 * @LastEditors: huangyingli
 * @LastEditTime: 2023-02-24 12:18:50
 * @Description:
 */
import { UploadOutlined } from '@ant-design/icons';
import { Button, Form, Input, Row, Upload, message } from 'antd';
import { ComponentAddRequest } from '../../api/conponentManage';
import { useNavigate } from 'react-router-dom';
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 10,
  },
};

const tailLayout = {
  wrapperCol: { span: 24 },
};
export function ComManageHandle() {
  const [form] = Form.useForm();
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const rules = {
    componentName: [{ required: true }],
    componentCode: [{ required: true }],
    componentConfig: [{ required: true }],
    componentIntroduce: [{ required: true }],
  };

  const normFile = (e) => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  function onFinish(values) {
    console.log('form values', values);

    const {
      componentName,
      componentIntroduce,
      componentCode,
      componentConfig,
    } = values;

    const data = {
      name: componentName,
      introduce: componentIntroduce,
      codeFileName: componentCode[0].response.data[0]?.name,
      codeFilePath: componentCode[0].response.data[0]?.path,
      codeFileUuid: componentCode[0].response.data[0]?.uuid,
      configFileName: componentConfig[0].response.data[0]?.name,
      configFilePath: componentConfig[0].response.data[0]?.path,
      configFileUuid: componentConfig[0].response.data[0]?.uuid,
      configJson: componentConfig[0].response.data[0]?.configJson,
      tableName: componentConfig[0].response.data[0]?.tableName,
    };

    ComponentAddRequest({ data }).then(() => {
      messageApi.open({
        type: 'success',
        content: '组件保存成功',
      });
      goBack();
    });
  }

  function goBack() {
    navigate(-1);
  }
  return (
    <div>
      {contextHolder}
      <Form {...layout} form={form} name='control-hooks' onFinish={onFinish}>
        <Form.Item
          name='componentName'
          label='组件名称'
          rules={rules.componentName}
        >
          <Input placeholder='请输入组件名称'></Input>
        </Form.Item>
        <Form.Item
          name='componentCode'
          label='组件源码'
          valuePropName='fileList'
          getValueFromEvent={normFile}
          rules={rules.componentCode}
        >
          <Upload action='/api/codeUpload' maxCount='1' name='code'>
            <Button icon={<UploadOutlined />}>Click to Upload</Button>
          </Upload>
        </Form.Item>
        <Form.Item
          name='componentConfig'
          label='组件配置'
          rules={rules.componentConfig}
          valuePropName='fileList'
          getValueFromEvent={normFile}
        >
          <Upload action='/api/configUpload' maxCount='1' name='config'>
            <Button icon={<UploadOutlined />}>Click to Upload</Button>
          </Upload>
        </Form.Item>
        <Form.Item
          name='componentIntroduce'
          label='组件介绍'
          rules={rules.componentIntroduce}
        >
          <Input.TextArea placeholder='请输入组件介绍'></Input.TextArea>
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Row justify='center'>
            <Button onClick={goBack}>取消</Button>
            <Button
              type='primary'
              htmlType='submit'
              style={{ marginLeft: '30px' }}
            >
              保存
            </Button>
          </Row>
        </Form.Item>
      </Form>
    </div>
  );
}
